<style type="text/css">
#home-left{
    width:auto;
    float:left;
    margin: 10px 0px;
}
.phpip-lists{
    margin:0px 5px 5px;
    padding: 4px;
    float:left;
    background: #B5D9E5;
    display:block;
    -moz-border-radius: 0px 4px 4px 4px;
    -webkit-border-radius: 0px 4px 4px 4px;
    border-radius: 0px 4px 4px 4px;
    -moz-box-shadow: 2px 2px 1px #888888;
    -webkit-box-shadow: 2px 2px 1px #888888;
    box-shadow: 2px 2px 1px #888888;
    max-height:270px;
}
.phpip-list{
    margin: 0px;
    padding: 0px;
    border: 1px inset #CCC;
    -moz-border-radius: 0px 0px 4px 4px;
    -webkit-border-radius: 0px 0px 4px 4px;
    border-radius: 0px 0px 4px 4px;
}
.phpip-list li{
    list-style: none;
    padding: 3px 6px;
    color: #3F3F38;
    border-bottom: 1px solid #DDD;
    background: #FFF;
}
.phpip-list li:hover {
    background: #C8E8F3;
}
.home-box-header{
    background: #B5D9E5;
    display:block;
    height: 24px;
    padding: 5px 5px 0px 0px;
    margin:0px 0px -3px 5px;
    -moz-border-radius: 4px 4px 0 0;
    -webkit-border-radius: 4px 4px 0 0;
    border-radius: 4px 4px 0 0;
    -moz-box-shadow: 2px 0px 1px #888;
    -webkit-box-shadow: 2px 0px 1px #888;
    box-shadow: 2px 0px 1px #888;
}
.list-headers {
    background: #1E4262;
    color: #FFF;
    -moz-border-radius: 4px 4px 0 0;
    -webkit-border-radius: 4px 4px 0 0;
    border-radius: 4px 4px 0 0;
    border: none;
    padding: 4px 6px;
}
.phpip-list li:last-child {
    -moz-border-radius: 0 0 4px 4px;
    -webkit-border-radius: 0 0 4px 4px;
    border-radius: 0 0 4px 4px;
}
#home-right{
    float: left;
    width: auto;
}
#open-tasks-list{
    max-height: 270px;
    width: 540px;
    overflow:auto;
}
#ren-tasks-list{
    max-height: 270px;
    width: 540px;
    overflow-x: hidden;
    overflow: auto;
}
#users-task-count{
    width: 387px;
}
.col-cat{
    display:inline-block;
    width: 225px;
}
.col-count{
    display:inline-block;
    width: 100px;
    text-align: right;
}
.col-actions{
    display: inline-block;
    width: 50px;
    text-align: center;
}
.col-task-name{
   display: inline-block;
   width: 200px;
}
.col-task-matter{
   display: inline-block;
   width: 150px;
}
.col-task-due_date{
  display: inline-block;
  width: 100px;
}
.img-buttons{
  border: none;
}
.col-user-login{
  display: inline-block;
  width: 120px;
}
.col-open-count{
  display: inline-block;
  width: 75px;
  text-align: center;
}
.col-most-urgent{
  display: inline-block;
  width: 135px;
  text-align: right;
}
#task-pop-up{
  display: none;
  z-index: 101;
  width:auto;
  top: 200px;
  position:fixed;
}
#tasklist-pop-up{
    display: none;
    z-index: 101;
    position: fixed;
    background: transparent;
    top: 200px;
}
#add-matter-popup{
  display: none;
  z-index: 101;
  width:auto;
  top: 200px;
  position:fixed;
}
.list-header{
  background: #B5D9E5;
  float:left;
  margin-left: 5px;
  -moz-border-radius: 4px 4px 0px 0px;
  -webkit-border-radius: 4px 4px 0px 0px;
  border-radius: 4px 4px 0px 0px;
  width:240px;
  display:block; 
}
.home-box{
  float:left;
}
#clear-task-name{
padding: 5px;
font-size: 13px;
font-weight: bold;
text-align: center;
display: block;
}
.clear-tasks-box{
  float:right;
}
.done-date{
  width: 100px;
  border: 1px inset #ccc;
  -moz-border-radius:3px;
  -webkit-border-radius:3px;
  border-radius:3px;
}
.home-card{
    background-color: #B5D9E5;
    padding:5px;
    margin-left: 5px;
    display: inline-block;
    -moz-border-radius:0px 0px 5px 5px;
    -webkit-border-radius:0px 0px 5px 5px;
    border-radius:0px 0px 5px 5px;
    box-shadow:2px 2px 1px #888;
    -moz-box-shadow:2px 2px 1px #888;
    -webkit-box-shadow:2px 2px 1px #888;
}
.list-matter-block-info {
    display:inline-block;
    vertical-align: top;
    background-color: #FFFFFF;
    border: 1px solid #DDD;
    border-style:inset;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    height: 100px;
    padding:4px;
    overflow: auto;
}
</style>

<script type="text/javascript">
$(document).ready(function(){

    $('.open-ren').click(function(){
       var tid = $(this).attr('id');
       $('#facade').css('height', $(document).height());
       $('#facade').css("display", "block");
       $.ajax({
         url: '/index/open-task-details',
         type: 'GET',
         data: { task_id: tid },
         success: function(data){
             $('#task-pop-up').html(data);
             var ren_left = Math.round($(window).width()/2) - Math.round($('#task-pop-up').width()/2);
             $('#task-pop-up').css('left', ren_left);
             $('#task-pop-up').css('display', 'block');
         }
       });
    });
    $('.open-task').click(function(){
       var trigid = $(this).attr('id');
       $('#facade').css('height', $(document).height());
       $('#facade').css("display", "block");
       $.ajax({
         url: '/matter/tasklist/event_id/' + trigid,
         type: 'POST',
         data: {},
         success: function(data){
             $('#tasklist-pop-up').html(data);
             $('#tasklist-pop-up').css('display', 'block');
         }
       });
    });

    $('.add-cat-matter').click(function(){
        var catid = $(this).attr('id');
        $('#facade').css('height', $(document).height());
        $('#facade').css("display", "block");
        $('#add-matter-popup').css('left', '200px');
        $.ajax({
          url: '/matter/add',
          type: 'GET',
          data: { category_id : catid },
          success: function(data){
             $('#add-matter-popup').html(data);
          }
        });
        $('#add-matter-popup').css('display', 'block');
    });

    $('.done-date').datepicker({
        dateFormat: 'dd/mm/yy',
    });
    $('.done-date').datepicker('setDate', new Date());

    $('#clear-open-tasks').click(function(){
        var tids = new Array();
        $('.clear-open-task').each(function(){
          if($(this).is(':checked'))
             tids.push($(this).attr('id'));
        });
        if(tids.length == 0) {
             alert("No tasks selected for clearing!");
             return;
        }
        $.ajax({
          url: '/matter/clear-tasks',
          type: 'POST',
          data: { task_ids: tids, done_date: $('#open-done-date').val() },
          success:function(data){
            if(!isNaN(parseInt(data)))
              location.reload();
            else
              alert(data);
          }
        });
    });

    $('#clear-ren-tasks').click(function(){
        var tids = new Array();
        $('.clear-ren-task').each(function(){
          if($(this).is(':checked'))
             tids.push($(this).attr('id'));
        });
        if(tids.length == 0) {
             alert("No tasks selected for clearing!");
             return;
        }
        $.ajax({
          url: '/matter/clear-tasks',
          type: 'POST',
          data: { task_ids: tids, done_date: $('#ren-done-date').val() },
          success:function(data){
            if(!isNaN(parseInt(data)))
              location.reload();
            else
              alert(data);
          }
        });
    });

    $('#cancel-clear-task').click(function(){
        $('.flake-dialog').css('display', 'none');
        $('#facade').css("display", "none");
    });

    $('#submit-clear-task').click(function(){
        var tid = $('#clear-task-name').attr('tid');
        var done_date = $('#done-date').val();
        $.ajax({
          url: '/matter/clear-task',
          type: 'POST',
          data: { task_id: tid, done_date: done_date },
          success: function(data){
            location.reload();
          }
        }); 
        $('.flake-dialog').css('display', 'none');
        $('#facade').css("display", "none");
    });

    $("input[name='open-tasks-filter']").change(function(){
        var tasks_flag = $("input[name='open-tasks-filter']:checked").val();
        $.ajax({
          type: "POST",
          url: '/index/task-filter',
          data: { task_type : 'open', filter: tasks_flag },
          success: function(data){
            $('#open-tasks-list').html(data);
          }
        });
    });

    $("input[name='open-rens-filter']").change(function(){
        var tasks_flag = $("input[name='open-rens-filter']:checked").val();
        $.ajax({
          type: "POST",
          url: '/index/task-filter',
          data: { task_type : 'ren', filter: tasks_flag },
          success: function(data){
            $('#ren-tasks-list').html(data);
          }
        });
    });
    $( "button, input:button").button();
    $("#radio-tasks").buttonset();
    $("#radio-renewals").buttonset();
});
</script>
<div id="home-wrap">

<div id="home-left">
<div id="categories-box" class="home-box">
<div class="home-box-header">
<div class="list-header">Categories for <em><?=@$this->categories[0]['responsible']?></em></div>
<div class="clear-tasks-box"><button class="add-cat-matter" style="display:block;" id="Patent-PAT">New matter</button></div>
</div>
<div id="" class="home-card">
    <div class="list-headers"><div class="col-cat">Category</div><div class="col-count">Count</div><div class="col-actions"></div></div>
<?php if(count($this->categories)){ ?>
<ul class="phpip-list" id="category-list">
<?php foreach($this->categories as $matter): ?>
    <li><div class="col-cat"><a href="/matter/filter/Cat/<?=$matter['category_code']?>/responsible/<?=$matter['responsible']?>"><?=$matter['category']." (".$matter['category_code'].")"?></a></div><div class="col-count"><?=$matter['no_of_matters']?></div><div class="col-actions"><a href="javascript:void(0);" class="add-cat-matter" id="<?=$matter['category']?>-<?=$matter['category_code']?>" title="New <?=$matter['category']?>"><span class="ui-icon ui-icon-plusthick" style="float: right;"></span></span></a></div></li>
<?php endforeach; ?>
</ul>
<?php } ?>
</div>
</div>

<div id="open-tasks-box" class="home-box">
<div class="home-box-header">
<div class="list-header">Open tasks
<span id="radio-tasks" style="float: right;">
<input type="radio" name="open-tasks-filter" id="open-tasks-all" value="0" checked="checked" />
<label for="open-tasks-all" style="width: 50px;">All</label>
<input type="radio" name="open-tasks-filter" id="open-tasks-assigned" value="1" />
<label for="open-tasks-assigned" style="width: 50px;">Mine</label>
</span>
</div>

 <div class="clear-tasks-box">
<input type="button" id="clear-open-tasks" value="Clear selected on" style="padding: 2px 8px;" />
<label for="open-done-date" ></label><input type="text" value="" id="open-done-date" class="done-date" /><input type="hidden" value="" id="alt-date" />
</div>
</div>
<div id="" class="home-card">
<?php if(count($this->open_tasks)): ?>
<div class="list-headers"><div class="col-task-name">Task</div><div class="col-task-matter">Matter</div><div class="col-task-due_date">Due date</div><div class="col-actions">Close</div></div>
<ul class="phpip-list" id="open-tasks-list">
<?php foreach($this->open_tasks as $open_task){ 
$task_name  = $open_task['task_name'];
$task_name .= ($open_task['task_detail'])?" - ".$open_task['task_detail']: "";
if ($open_task['posix_due_date'] < date('Y-m-d'))
	$open_task['due_date'] = '<span style="color:red; text-decoration:blink;">' .$open_task['due_date']. '</span>';
else if ($open_task['posix_due_date'] < date('Y-m-d', strtotime('+1 week')))
	$open_task['due_date'] = '<span style="color:tomato;">' .$open_task['due_date']. '</span>';
?>
   <li id="<?=$open_task['task_ID']?>"><div class="col-task-name"><a href="javascript:void(0);" class="open-task" id="<?=$open_task['trigger_ID']?>"><?=$task_name?></a></div>
<div class="col-task-matter"><a href="/matter/view/id/<?=$open_task['MID']?>"><?=$open_task['UID']?></a></div>
<div class="col-task-due_date"><?=$open_task['due_date']?></div>
<div class="col-actions"><input type="checkbox" name="clear-task-<?=$open_task['task_ID']?>" id="<?=$open_task['task_ID']?>" class="clear-open-task" value="Clear"></div></li>
<?php } ?>
</ul>
<?php endif; ?>
</div>
</div>

</div>

<div id="home-right" >
<div id="users-box" class="home-box">
<div class="home-box-header">
<div class="list-header">Users tasks</div>
</div>
<div id="" class="home-card">
<div class="list-headers"><div class="col-user-login">User</div><div class="col-open-count">Open Tasks</div><div class="col-most-urgent">Most urgent</div></div>
<?php if(count($this->users_list)): ?>
<ul class="phpip-list" id="users-task-count" >
<?php foreach($this->users_list as $user){ 
if($user['no_of_tasks'] > 0){
if ($user['posix_urgent_date'] < date('Y-m-d'))
	$user['urgent_date'] = '<span style="color:red; text-decoration:blink;">' .$user['urgent_date']. '</span>';
else if ($user['posix_urgent_date'] < date('Y-m-d', strtotime('+1 week')))
	$user['urgent_date'] = '<span style="color:tomato;">' .$user['urgent_date']. '</span>';
?>
<li><div class="col-user-login"><a href="/index/user-page/username/<?=$user['login']?>"><?=$user['login']?></a></div><div class="col-open-count"><a href="/index/user-open-tasks/username/<?=$user['login']?>"><?=$user['no_of_tasks']?></a></div><div class="col-most-urgent"><?=$user['urgent_date']?></div></li>
<?php }} ?>
</ul>
<?php endif;?>
</div>
</div>

<div id="open-renewals-box" class="home-box">
<div class="home-box-header">
<div class="list-header">Open renewals
<span id="radio-renewals" style="float: right;">
<input type="radio" name="open-rens-filter" id="open-rens-all" value="0" checked="checked" />
<label for="open-rens-all" style="width: 50px;">All</label>
<input type="radio" name="open-rens-filter" id="open-rens-assigned" value="1" />
<label for="open-rens-assigned" style="width: 50px;">Mine</label>
</span>
</div>
<div class="clear-tasks-box">
<input type="button" id="clear-ren-tasks" value="Clear selected on" style="padding: 2px 8px;" />
<label for="ren-done-date" ></label><input type="text" value="" id="ren-done-date" class="done-date" /><input type="hidden" value="" id="alt-date" />
</div>
</div>
<div id="" class="home-card">
<?php if(count($this->ren_tasks)): ?>
<div class="list-headers"><div class="col-task-name">Task</div><div class="col-task-matter">Matter</div><div class="col-task-due_date">Due date</div><div class="col-actions">Close</div></div>
<ul class="phpip-list" id="ren-tasks-list">
<?php foreach($this->ren_tasks as $open_task){ 
$task_name  = $open_task['task_name'];
$task_name .= ($open_task['task_detail'])?" - ".$open_task['task_detail']: "";
if ($open_task['posix_due_date'] < date('Y-m-d'))
	$open_task['due_date'] = '<span style="color:red; text-decoration:blink;">' .$open_task['due_date']. '</span>';
else if ($open_task['posix_due_date'] < date('Y-m-d', strtotime('+1 week')))
	$open_task['due_date'] = '<span style="color:tomato;">' .$open_task['due_date']. '</span>';
?>
 <li id="<?=$open_task['task_ID']?>"><div class="col-task-name"><a href="javascript:void(0);" class="open-ren" id="<?=$open_task['task_ID']?>"><?=$task_name?></a></div><div class="col-task-matter"><a href="/matter/view/id/<?=$open_task['MID']?>"><?=$open_task['UID']?></a></div><div class="col-task-due_date"><?=$open_task['due_date']?></div>
<div class="col-actions"><input type="checkbox" name="clear-task-<?=$open_task['task_ID']?>" id="<?=$open_task['task_ID']?>" class="clear-ren-task button-style" value="Clear"></div></li>
<?php } ?>
</ul>
<?php endif; ?>
</div>

</div>

</div>
</div>

<div id="task-pop-up" class="place-card" ></div>
<div id="tasklist-pop-up"></div>
<div id="add-matter-popup" class="" ></div>
<div id="facade"></div>

<div class="flake-dialog place-card" >
<div class="dialog-head"><span class="dialog-title">Clear task</span> <span class="dialog-close">X</span></div>
<div class="dialog-content">
<div style="display:block;"><span id="clear-task-name"></span></div>
<div style="display:block;"><label for="done-date" >Done date </label><input type="text" value="" id="done-date" /><input type="hidden" value="" id="alt-date" /></div>
<div style="text-align: center;"><input type="button" value="Clear task" id="submit-clear-task" class="button-style" /> <input type="button" value="Cancel" id="cancel-clear-task" class="button-style" /></div>
</div>
</div>

